<template>
    <el-dialog v-model="show" title="发放工资" width="35%" align-center @close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm"
            status-icon>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="经办人:" prop="name">

                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="付款日期:">
                        2024-12-29
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="摘要:" prop="name">
                         
                    </el-form-item>
                </el-col>
                <el-col :span="12"> 
                    <el-form-item label="工资金额:" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>  
                </el-col>
                <el-col :span="12">
                    <el-form-item label="收款方:" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所属公司:" prop="name">
                        <el-select style="width: 100%;" v-model="ruleForm.region" placeholder="Activity zone">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="付款账号:" prop="name">
                        <el-select style="width: 100%;" v-model="ruleForm.region" placeholder="Activity zone">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                </el-col>
               
                <el-col :span="24">
                    <el-form-item label="付款信息:" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="凭证上传:" prop="name">
                        <el-upload ref="designSketchRef" :show-file-list="false" drag :action="uploadImgUrl"
                            :headers="headers" multiple :auto-upload="true" :on-success="handleDesignSketchSuccess"
                            :before-upload="beforedeSignSketchUpload">
                            <img style="height: 100px;" v-if="ruleForm.assemblyRenderingUrl"
                                :src="ruleForm.assemblyRenderingUrl" />
                            <template v-else>
                                <div style="padding-top: 10px;">
                                    <uploadStyle type="1" icon="PictureFilled" />
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules, UploadProps } from 'element-plus'
import { globalHeaders } from "@/utils/request";
import uploadStyle from '@/views/productManagement/designerTakesOrders/components/uploadStyle.vue';


const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList', 'type']);
const emits = defineEmits(['submit', 'close']);

const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);

const show = ref(false);
const dialogVisible = ref();


watch(() => props.visible, async (newValue) => {
    show.value = newValue
    if (newValue) {
    }
}, { deep: true });

interface RuleForm {
    name: string
    region: string
    count: string
    assemblyRenderingUrl: string
};
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: 'Hello',
    region: '',
    count: '',
    assemblyRenderingUrl: '',
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: ['blur', 'change'],
        },
    ],
    count: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: ['blur', 'change'],
        },
    ],
});

/** 上传效果图 */
const handleDesignSketchSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    dialogVisible.value.close()

    // response.data.url
};

const beforedeSignSketchUpload: UploadProps['beforeUpload'] = () => {
    dialogVisible.value = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
};

const handleSubmit = async () => {
    proxy?.$modal.msgSuccess('操作成功');
    emits('submit', true);

    handleClose();
};


const handleClose = () => {
    emits('close');
};

onMounted(() => {
})
</script>

<style lang="scss" scoped>
::v-deep .el-upload-dragger {
    padding: 0px 4px !important;
    height: 100px !important;
    width: 260px;
}

::v-deep .el-divider--horizontal {
    margin: 12px 0;
}
</style>